<script lang="ts" setup>
import { ref,onMounted } from 'vue'
const { t, locale } = useI18n();
const activeTab = ref(0)
import type { EnumCurrencyKey } from '~/apis/types';
import type { CurrencyCode } from '~/composables/useCurrencyData';
const route = useRoute()
interface Props {
  initCurrency: EnumCurrencyKey
}
defineOptions({
  name: 'AppWalletWithDrawV3',
})
definePageMeta({
    layout: 'header-back',
    title: 'withdraw'
})
const { isSetPayPwd } = useAuthConfig()
const router = useRouter()
const props = defineProps<Props>()
const appStore = useAppStore()
const brandStore = useBrandStore()
const { userInfo } = storeToRefs(useAppStore())
// const { runMemberAuthConfig } = useAuthConfig()
/** 首次加载不展示子组件loading */
const { currentCurrency, currentCurrencyCode, withdrawCurrencyList, runGetFinanceWithdrawCurrencyData } = useCurrencyData()

/** 是否显示手机或者邮箱Code输入框 */
const showVerifySheet = computed(() => {
  console.log(userInfo.value?.email_check_state === 1, userInfo.value?.phone_check_state === 1, brandStore.isOpenEmailVerify, brandStore.isOpenMobileVerify)
  return {
    email: brandStore.isOpenEmailVerify && userInfo.value?.email_check_state !== 1,
    phone: brandStore.isOpenMobileVerify && userInfo.value?.phone_check_state !== 1
  }
})
/** 法币列表 */
const fiatCurrencyList = computed(() => {
  if (withdrawCurrencyList.value.length)
    return withdrawCurrencyList.value.filter(a => !application.isVirtualCurrency(a.currency_name))

  return []
})
/** 虚拟币列表 */
const virtualCurrencyList = computed(() => {
  if (withdrawCurrencyList.value.length) {
    return withdrawCurrencyList.value.filter(a => application.isVirtualCurrency(a.currency_name)).map((b) => {
      return {
        ...b,
        label: b.currency_name as EnumCurrencyKey,
        value: b.currency_id as CurrencyCode,
      }
    })
  }
  return []
})
const tabList = computed(() => {
  const arr: ISelectOptionString[] = []
  if (fiatCurrencyList.value.length > 0)
    arr.push({ label: t('recharge_law_coin'), value: '0' })
  if (virtualCurrencyList.value.length > 0)
    arr.push({ label: t('recharge_crypto_coin'), value: '1' })
  return arr
})
/** 初始化的币种 */
const currency = ref(props.initCurrency)
const currency_code = ref(currencyConfig[props.initCurrency]?.cur)
/** 默认法币 */
const initFiatCurrency = ref()
/** 默认加密货币 */
const initVirCurrency = ref()
/*
初始化默认选中货币
根据tab的值 如果是法币 用传过来的货币初始化 法币默认值 , 虚拟币的默认值则用全局的值
*/
function initAllCurrency() {
  if (activeTab.value === 0) {
    initFiatCurrency.value = application.isVirtualCurrency(currency.value) ? withdrawCurrencyList.value!.filter(a => !application.isVirtualCurrency(a.currency_name))[0] : withdrawCurrencyList.value!.find(item => item.currency_id === currency_code.value)
    initVirCurrency.value = application.isVirtualCurrency(currentCurrency.value)
      ? withdrawCurrencyList.value!.find(item => item.currency_id === currentCurrencyCode.value)
      : withdrawCurrencyList.value!.filter(a => application.isVirtualCurrency(a.currency_name))[0]
  }
  else {
    initVirCurrency.value = application.isVirtualCurrency(currency.value) ? withdrawCurrencyList.value!.find(item => item.currency_id === currency_code.value) : withdrawCurrencyList.value!.filter(a => application.isVirtualCurrency(a.currency_name))[0]
    initFiatCurrency.value = application.isVirtualCurrency(currentCurrency.value)
      ? withdrawCurrencyList.value!.filter(a => !application.isVirtualCurrency(a.currency_name))[0]
      : withdrawCurrencyList.value!.find(item => item.currency_id === currentCurrencyCode.value)
  }
}
watch(withdrawCurrencyList, () => {
  initAllCurrency()
}, {
  immediate: true,
})

// watch(isSetPayPwd, () => {
//   if(!isSetPayPwd.value){
//     router.push('withdraw/pay-password')
//   }
// })

/** 刷新账号数据和获取可取款货币列表 */
await application.allSettled([
  appStore.updateUserInfo(),
  brandStore.runAsyncBrandBaseDetail(),
  runGetFinanceWithdrawCurrencyData(),
  // runMemberAuthConfig(),
])
const activeTabs = (index: number) =>{
  activeTab.value = index
}
onMounted(() => {
  console.log('route.query',route.query);
  
  if (route.query.fromClick) {
    console.log('点击');
    activeTabs(1)
  }
})
</script>

<template>
  <div v-if="isSetPayPwd">
    <AppWithdrawEmailOrPhoneVerify v-if="showVerifySheet.email || showVerifySheet.phone" :verifyType="showVerifySheet"/>
    <div class="flex">
      <div v-for="(tab, index) in tabList" :key="tab.value"
        :class="[activeTab === index ? 'border-b-2 !border-b-brand !text-text-white-0' : '']"
        class="flex-1 h-[48px] flex justify-center items-center border-b-2 border-b-transparent font-[700] text-text-white-2"
        @click="activeTab = index">
        {{ tab.label }}
      </div>
    </div>
    <AppWithdrawLawCurrency v-show="activeTab === 0" :init-fiat-currency="initFiatCurrency"/>
    <AppWithdrawCryptoCurrency v-show="activeTab === 1" :init-vir-currency="initVirCurrency" :init-vir-currency-list="virtualCurrencyList"/>
  </div>
  <div v-else>
    {{router.push('withdraw/pay-password')}}
  </div>
</template>

<style lang="scss"></style>
